﻿@page "/pivot-table/field-list"

@using Syncfusion.Blazor.PivotView
@using BlazorDemos
@using ej2_blazor_productdetails

@inherits SampleBaseComponent;

<SampleDescription>
   <p>This sample demonstrates the Excel-like field list feature of the pivot table. The pivot fields are automatically populated from the bound data source, and they can be dragged and dropped to create, view and alter the report at runtime.</p> 
</SampleDescription>
<ActionDescription>
   <p>The pivot table provides a built-in field list very similar to Microsoft Excel. The top section of the
        field list allows the user to add and remove fields. The bottom section of the field list allows the user to rearrange the
        fields between different axes, including column, row, value, and filter along with filter and sort options.
        <br><br> To show the field list independently, create as separate component namely
        <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotFieldList-1.html'>SfPivotFieldList</a></code> and assign data source to the 
        <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldListDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotFieldListDataSourceSettings_1_DataSource'>DataSource</a></code> property in <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldListDataSourceSettings-1.html'>PivotFieldListDataSourceSettings</a></code> class. Simultaneously, pivot table will be populated by passing its instance in
        the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotFieldList-1.html#Syncfusion_Blazor_PivotView_SfPivotFieldList_1_UpdateViewAsync_System_Object_'>UpdateViewAsync</a></code> method inside the
        <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldListEvents-1.html#Syncfusion_Blazor_PivotView_PivotFieldListEvents_1_EnginePopulated'>EnginePopulated</a></code> event of field list.
        <br /><br />
        Additionally, user interface for calculated field, label filter, and value filter features have been enabled in this demo by setting the properties
        <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldListModel-1.html#Syncfusion_Blazor_PivotView_PivotFieldListModel_1_AllowCalculatedField'>PivotFieldList->AllowCalculatedField</a></code>,
        <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldListDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotFieldListDataSourceSettings_1_AllowLabelFilter'>PivotFieldListDataSourceSettings->AllowLabelFilter</a></code> and <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldListDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotFieldListDataSourceSettings_1_AllowValueFilter'>PivotFieldListDataSourceSettings->AllowValueFilter</a></code> to <b>true</b>.
    </p>
<p>More information on the field list can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/pivot-table/field-list/'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div class="content-wrapper">
        <SfPivotView TValue="PivotProductDetails" @ref="@PivotView" Height="530" AllowCalculatedField=true ShowTooltip=false>
            <PivotViewGridSettings ColumnWidth="120"></PivotViewGridSettings>
            <PivotViewEvents TValue="PivotProductDetails" EnginePopulated="@PivotEnginePopulated" Drill="@UpdateDrillInfo"></PivotViewEvents>
        </SfPivotView>
        <SfPivotFieldList TValue="PivotProductDetails" @ref="@PivotFieldList" AllowCalculatedField="true" RenderMode="Mode.Fixed">
            <PivotFieldListDataSourceSettings DataSource="@Data" EnableSorting=true AllowLabelFilter="true" AllowValueFilter="true">
                <PivotFieldListColumns>
                    <PivotFieldListColumn Name="Year"></PivotFieldListColumn>
                    <PivotFieldListColumn Name="Order_Source" Caption="Order Source"></PivotFieldListColumn>
                </PivotFieldListColumns>
                <PivotFieldListRows>
                    <PivotFieldListRow Name="Country"></PivotFieldListRow>
                    <PivotFieldListRow Name="Products"></PivotFieldListRow>
                </PivotFieldListRows>
                <PivotFieldListValues>
                    <PivotFieldListValue Name="In_Stock" Caption="In Stock"></PivotFieldListValue>
                    <PivotFieldListValue Name="Sold" Caption="Unit Sold"></PivotFieldListValue>
                    <PivotFieldListValue Name="Amount" Caption="Sold Amount"></PivotFieldListValue>
                </PivotFieldListValues>
                <PivotFieldListFilters>
                    <PivotFieldListFilter Name="Product_Categories" Caption="Product Categories"></PivotFieldListFilter>
                </PivotFieldListFilters>
                <PivotFieldListFormatSettings>
                    <PivotFieldListFormatSetting Name="Amount" Format="C0" UseGrouping=true></PivotFieldListFormatSetting>
                </PivotFieldListFormatSettings>
            </PivotFieldListDataSourceSettings>
            <PivotFieldListEvents TValue="PivotProductDetails" EnginePopulated="@EnginePopulated"></PivotFieldListEvents>
        </SfPivotFieldList>
    </div>
</div>

<style>

    .e-pivotview {
        float: left;
        min-height: 200px;
        width: 62% !important;
    }

    .e-pivotfieldlist {
        float: right;
        width: 37% !important;
    }

    .e-pivotfieldlist .e-static {
        width: 100% !important;
    }

    .e-pivotfieldlist.e-device {
        display: none;
    }

    .e-pivotview .e-pivotfieldlist .e-toggle-field-list{
        display: none;
    }

    .e-pivotview .e-pivotfieldlist.e-device .e-toggle-field-list {
        display: block;
    }

    html, body {
        height: 100%;
    }
</style>

@code{
    SfPivotFieldList<PivotProductDetails> PivotFieldList;
    SfPivotView<PivotProductDetails> PivotView;

    public List<PivotProductDetails> Data { get; set; }

    protected override void OnInitialized()
    {
        this.Data = PivotProductDetails.GetProductData();
    }
    public async Task PivotEnginePopulated(EnginePopulatedEventArgs args)
    {
        await this.PivotFieldList.UpdateAsync(this.PivotView);
    }
    public async Task UpdateDrillInfo(DrillArgs<PivotProductDetails> args)
    {
        await this.PivotFieldList.UpdateAsync(this.PivotView);
    }
    public async Task EnginePopulated(EnginePopulatedEventArgs args)
    {
        await this.PivotFieldList.UpdateViewAsync(this.PivotView);
    }
}